<!--
 * @Author: xjt
 * @Date: 2021-06-28 16:59:46
 * @LastEditTime: 2021-06-29 20:20:09
 * @Description: 隔离人员
 * @LastEditors: xjt
-->
<template>
  <div>
    <div class="primaryTitle">
      <strong>隔离人员</strong>
    </div>
    <div class="wrap">
      <div class="wrapItem">
        <ul class="item">
          <li class="listPanel" v-for="item in dataItemInfo" :key="item.name">
            <div class="title">{{item.label}}</div>
            <div class="attrs" v-for="data in totalData[item.name]" :key="data.name">
              {{data.label}}
              <mark>{{data.value}}</mark>人
            </div>
          </li>
        </ul>
      </div>
      <div class="wrapItem specialItem">
        <div class="numberPanel">
          <div class="numberPanelTop">
            <span class="num">{{totalData.special.total}}</span>
            <span class="unit">人</span>
          </div>
          <div class="numberPanelDown">特殊人群</div>
        </div>
        <ul>
          <li class="attrs" v-for="data in totalData.special.list" :key="data.name">
            {{data.label}}
            <mark>{{data.value}}</mark>人
            <span class="precent">{{data.precent}}</span>
          </li>
        </ul>
      </div>

      <div class="tipsItem">
        <div class="tipsTitle">
          <span>风险提示</span>
        </div>
        <ul>
          <li v-for="(item, index) in totalData.warning" :key="index">
            <div class="datetime">{{item.monitor_time}}</div>
            <div class="info">{{item.person_name}} 体温{{item.temperature}}℃</div>
          </li>
        </ul>
        <el-button round type="primary" size="small">更多</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getPersonTotal } from '@/views/wy-home/api'
import dataConst from './const'
export default {
  mounted () {
    this.init()
  },
  data () {
    return {
      totalData: {
        special: {},
      }
    }
  },
  computed: {
    keyInfo () {
      return dataConst['person']
    },
    dataItemInfo () {
      return [
        { label: '人员状态', name: 'status' },
        { label: '人员类别', name: 'category' },
        { label: '人员身份', name: 'identy' },
      ]
    }
  },
  methods: {
    init () {
      getPersonTotal().then(res => {
        const data = res.data.data
        let totalData = {}
        for (const key in this.keyInfo) {
          switch (key) {
            case 'status':
            case 'category':
            case 'identy':
              totalData[key] = Object.entries(this.keyInfo[key]).map(item => {
                const [name, label] = item
                return { name, label, value: data[name] }
              })
              break;
            case 'warning':
              totalData[key] = data[this.keyInfo[key]];
              break;
            case 'special':
              let list = Object.entries(this.keyInfo[key]).map(item => {
                const [name, label] = item
                return { name, label, value: data[name] }
              })
              let total = list.reduce((total, _) => total + (_.value || 0), 0)
              totalData[key] = {
                total,
                list: list.map(i => ({ ...i, precent: (i.value / total * 100).toFixed(2) + '%' })),
              }
              break;
            default:
              break;
          }
        }
        this.totalData = totalData
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap {
  color: #fff;
  display: grid;
  grid-template-columns: 6fr 4fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-areas:
    "a b"
    "c c";
  mark {
    background-color: unset;
    color: #00eaff;
    font-weight: bold;
    margin: 0 0.25em;
  }
  .wrapItem > ul.item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.specialItem {
  display: inline-grid;
  grid-template-columns: 2fr 3fr;
  align-items: center;
  ul {
    display: block;
    li {
      font-size: 16px;
      margin-bottom: 13px;
      &:last-child {
        margin-bottom: 0;
      }
      mark {
        font-size: 18px;
      }
      .precent {
        color: #00ffe4;
        font-size: 16px;
      }
    }
  }
}
</style>
